<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础使用</text>
         <view class="uv-demo-block__content">
            <uv-tooltip :text="text1" overlay></uv-tooltip>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">下方显示</text>
         <view class="uv-demo-block__content" style="padding-bottom: 30px">
            <uv-tooltip :text="text2" direction="bottom"></uv-tooltip>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">扩展按钮</text>
         <view class="uv-demo-block__content">
            <uv-tooltip :text="text3" :buttons="buttons1" @click="click"></uv-tooltip>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自动调整位置</text>
         <view class="uv-demo-block__content">
            <uv-tooltip :text="text4" :buttons="buttons2"></uv-tooltip>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">高亮选中文本背景色</text>
         <view class="uv-demo-block__content">
            <uv-tooltip :text="text5" :buttons="buttons3" bgColor="#e3e4e6"></uv-tooltip>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const text1 = ref('长按文本，上方提示');
const text2 = ref('长按文本，下方提示');
const text3 = ref('显示多个扩展按钮');
const text4 = ref('自动调整气泡位置');
const text5 = ref('长按文本，显示背景色');

const buttons1 = ref(['扩展']);
const buttons2 = ref(['扩展', '搜索', '翻译']);
const buttons3 = ref(['扩展', '搜索', '翻译']);

const click = (index: number) => {
   console.log('click', index);
};
</script>

<style lang="scss" scoped>
.uv-demo-block__content {
   padding-top: 10px;
}
</style>
